<template>
    <div id="slide-image">
        <el-upload
            :action="`${baseURL}carousel/add`"
            :data='params'
            :headers="headers"
            name='multipartFile'
            list-type="picture-card"
            :file-list="imgList"
            :on-preview="viewImg"
            :on-remove="onRemove"
            :limit="3"
            :on-exceed="alertMsg"
            accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
            :before-upload="checkType"
            :on-success="succcessUpload"
        >
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" size="tiny">
            <img class="img" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import EXIF from 'exif-js'
import axios from 'axios'
export default {
    data(){
        return{
            imgList:[],
            dialogImageUrl: '',
            dialogVisible: false,
            params:{
                type:"app",
                moduleName:'app配置',
            },
            headers:{
                Authorization:localStorage.tokenId
            },
            baseURL:window.baseURL,
        }
    },
    methods:{
        //请求已选图片列表
        getList(){
            var submitData={type:'app'}
            this.$http.bannerList(submitData)
            .then((res)=>{
                var  data=res.data.data
                if(!Array.isArray(data)){
                    throw(data)
                }
                var newData=data.map((item)=>{
                        item.url=item.pictureUrl
                        return item
                })
                this.imgList=newData
            }).catch((err)=>{
                throw(err)
            })
        },

        onRemove(imgData){
            if(!imgData.id){
                return
            }
            var submitData={id:imgData.id,moduleName:'app配置'}
            this.$http.bannerDelete(submitData)
            .then((res)=>{
                this.$message.success("删除成功!")
            }).catch((err)=>{
                throw(err)
            })
        },

        succcessUpload(response, file, fileList){
            if(response.code && response.code!==200){
                window.message.close()
                window.message= this.$message({
                    type:'error',
                    message:response.message,
                    showClose:true,
                })
                fileList.pop()
                return false
            }
        },

        viewImg(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        alertMsg(){
            this.$message.warning("上传图片不超过3张！")
        },

        checkType(imgData){
            var reg=/(.jpg|.jpeg|.png|.gif|.JPG|.JPEG)/g
            var result=imgData.name.match(reg)
            if(!result){
                this.$message.warning("上传失败：图片格式不支持!")
                return false
            }else if(imgData.size>8*1024*300){
                this.$message.warning("上传失败：图片过大!")
                return false
            }
        },

    },
    created(){
       this.getList()
    },
    
}
</script>
<style lang="scss" scoped>
#slide-image{
    height:100%;
    position:relative;
    padding:20px 30px;

}

/deep/ .el-dialog__wrapper{
    .el-dialog{
        display:flex;
        flex-direction:column;
        .el-dialog__header{
            height:30px;
            border-bottom:1px solid #eee;
        }
        .el-dialog__body{
            flex:1;
            overflow:auto;
			padding:0px 10px 10px 10px;
        }
    }
	.img{
		margin: auto;
	}
}


</style>
